<!--团游景点详情页面-->
<template>
  <div class="scenic-detail-container">
    <!-- 左侧景点详情 -->
    <div class="scenic-info">
      <h1>{{ data.scenicData.mainName }}</h1>
      <div class="rating">
        <el-rate v-model="data.scenicData.level" disabled show-score :max="5" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" />
        <span class="rating-text">{{ getRatingText(data.scenicData.level) }}</span>
      </div>

      <!--      <h2 class="title">{{ data.scenicData.title }}</h2>-->
      <p class="sub-name">{{ data.scenicData.subName }}</p>

      <!-- 图片展示 -->
      <div class="image-gallery" v-if="data.scenicData.imgs">
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item v-for="img in data.scenicData.imgList">
            <img :src="img" class="carousel-image" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 详情内容 -->
      <div class="detail-content" v-html="data.scenicData.descInfo"></div>
    </div>

    <!-- 右侧预订区域 -->
    <div class="booking-section">
      <div class="price-section">
        <span class="price">¥{{ data.scenicData.price }}</span>
        <span class="price-unit">人</span>
        <el-tag type="danger" class="discount-tag">限时优惠</el-tag>
      </div>

      <!-- 日期选择 - 修改为日历 -->
      <div class="date-picker-section">
        <h3>选择出行日期</h3>
        <el-calendar
            v-model="data.selectedDate"
            :disabled-date="disabledDate"
            class="custom-calendar"
        />
      </div>

      <!-- 人数选择 & 提交订单按钮 -->
      <div class="submit-section">
        <div class="people-selector">
          <span class="selector-label">人数：</span>
          <el-input-number
              v-model="data.peopleCount"
              :min="1"
              :max="10"
              size="large"
              controls-position="right"
          />
          <span class="total-price">总价：¥{{ totalPrice }}</span>
        </div>
        <el-button
            type="danger"
            size="large"
            @click="submitOrder"
            :disabled="!data.selectedDate"
        >
          立即预订
        </el-button>
      </div>

      <div class="features">
        <div class="feature-item">
          <el-icon><Check /></el-icon>
          <span>纯玩无购物</span>
        </div>
        <div class="feature-item">
          <el-icon><Check /></el-icon>
          <span>VIP通道</span>
        </div>
        <div class="feature-item">
          <el-icon><Check /></el-icon>
          <span>专业导游</span>
        </div>
      </div>
    </div>

    <!-- 提交订单对话框 -->
    <el-dialog
        v-model="data.showOrderDialog"
        title="提交订单"
        width="30%"
        center>
      <div class="order-info">
        <h3>订单信息</h3>
        <p>景点名称：{{ data.scenicData.mainName }}</p>
        <p>预定日期：{{ formatChineseDate(data.selectedDate) }}</p>
        <p>出行人数：{{ data.peopleCount }}人</p>
        <p>订单金额：¥{{ totalPrice }}</p>
        <p class="confirm-text">是否确认下单？</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.showOrderDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmOrder">确认下单</el-button>
        </span>
      </template>
    </el-dialog>
  </div>

  <!-- 扫码付款窗口 -->
  <el-dialog v-model="data.payWin">
    <div v-html="data.payHtml"></div>
  </el-dialog>
</template>

<script setup>
import {reactive, computed, onMounted} from 'vue'
import { Check } from '@element-plus/icons-vue'
import {ElMessage, ElNotification} from 'element-plus'
import {useRoute} from "vue-router";
import axios from "axios";
import QRCode from "qrcode";

const data = reactive({
  // 景点数据
  scenicData: {
    id: null,
    mainName: '张家界+大峡谷+天门山+湘西+凤凰3日2晚跟团游',
    lv: 4,
    title: '【携程自营-云梦潇湘】热销！28人纯玩&限时打2+1航空巴士',
    subName: '0购物/0超市10车载】3大VIP通道+赠耳麦<玻璃杯+玻璃栈道+7455米高山索道+芙蓉镇+夜宿凤凰>苗族换装50餐标',
    jdId: '12345',
    imgs: 'https://dimg04.c-ctrip.com/images/0305012000jb72yskC1A7_C_240_180_Q100.jpg,https://dimg04.c-ctrip.com/images/0303h12000iwy4vhjDF6E_C_240_180_Q100.jpg',
    xq: '<div>这里是HTML格式的详情内容</div>',
    price: 762
  },
  selectedDate: '',
  peopleCount: 1,
  showOrderDialog: false
})

let route = useRoute()
// 加载事件 查询
onMounted(()=>{
  let jdID = route.params.id
  axios.post('/grouptravel/detail?id='+jdID).then(res=>{
    data.scenicData = res.data
  })
})


// 计算总价
const totalPrice = computed(() => {
  return data.scenicData.price * data.peopleCount
})

// 禁用今天及之前的日期
const disabledDate = (time) => {
  return time.getTime() < Date.now()
}

// 格式化中文日期
const formatChineseDate = (date) => {
  if (!date) return ''

  const d = new Date(date)
  const year = d.getFullYear()
  const month = (d.getMonth() + 1).toString().padStart(2, '0')
  const day = d.getDate().toString().padStart(2, '0')
  const weekdays = ['日', '一', '二', '三', '四', '五', '六']
  const weekday = weekdays[d.getDay()]

  return `${year}年${month}月${day}日 星期${weekday}`
}

// 提交订单
const submitOrder = () => {
  if (!data.selectedDate) {
    ElMessage.error('请选择出行日期')
    return
  }
  if(data.selectedDate.getTime() < Date.now()){
    ElMessage.error('只能预定明天之后的日期')
    return
  }
  data.showOrderDialog = true
}
// 将date转年月入字符串
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，+1 修正
  const day = String(date.getDate()).padStart(2, '0'); // 确保日期为两位数
  return `${year}-${month}-${day}`;
}
// 确认订单
const confirmOrder = () => {
  let dto = {
    id: data.scenicData.id,
    date: formatDate(data.selectedDate),
    num: data.peopleCount
  }
  axios.post('/grouptravel/addOrder',dto).then(res=>{
    data.showOrderDialog = false
    ElNotification.success({
      title: '成功',
      message: `
          您的订单号为:${res.data.orderId}
          付款金额:${res.data.totalAmount}
      `,
      duration: 5000   // 信息窗口保留时间
    })
    //调用后端支付宝下单页面
    axios.post(`/grouptravel/pay?orderId=${res.data.orderId}&money=${res.data.totalAmount}`).then(res=>{
      window.open(res.data,'_blank','width=600,height=600')
    })
  })
}
// window.open(,'_blank','width=600,height=600')

// 获取评分文本
const getRatingText = (rating) => {
  const ratingMap = {
    1: '一钻',
    2: '二钻',
    3: '三钻',
    4: '四钻',
    5: '五钻'
  }
  return ratingMap[rating] || '无评级'
}
</script>

<style scoped>
/* 原有样式保持不变 */
.scenic-detail-container {
  display: flex;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  gap: 30px;
  align-items: flex-start;
  justify-content: center; /* 新增：确保内容水平居中 */
  box-sizing: border-box; /* 确保padding不增加总宽度 */
}

.scenic-info {
  flex: 2;
}

.booking-section {
  flex: 1;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 20px;
  height: fit-content;
  display: flex;
  flex-direction: column;
}

/* 新增人数选择器样式 */
.submit-section {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.people-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}

.selector-label {
  font-size: 14px;
  color: #606266;
}

.total-price {
  margin-left: auto;
  font-weight: bold;
  color: #f56c6c;
}

/* 其他样式保持不变... */
.custom-calendar {
  width: 100%;
  min-width: 350px;
  --el-calendar-cell-width: auto;
  --el-calendar-cell-height: 40px; /* Reduce cell height */
}

.custom-calendar :deep(.el-calendar__body) {
  padding: 5px 10px;
}

.custom-calendar :deep(.el-calendar-table .el-calendar-day) {
  height: var(--el-calendar-cell-height);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-calendar :deep(.el-calendar-table td) {
  padding: 2px 0;
  border-bottom: none;
}

.custom-calendar :deep(.el-calendar-table tr:first-child td) {
  border-top: none;
}

/* Keep the overall calendar container compact */
.date-picker-section {
  margin-bottom: 20px;
}

.custom-calendar {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
</style>